/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-08-13 14:07:19
 * @LastEditTime : 2023-08-14 08:37:21
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Assets\Template\BeamNavTop.jsx
 * @Description  :
 */
import { Select } from 'antd'
import { useRequest } from 'ahooks'
import { useEffect, useState } from 'react'
import { Http } from '../../../../Common/Api'
import './Scss/BeamNavTop.scss'

export const BeamNavTop001 = ({ top, NavEvent }) => {
    const [Active, setActive] = useState(0)

    const [Data, setData] = useState()

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const [{ organizationUuid, remark }] = res.list
            console.log(res)
            setData(res.list)
            setActive(organizationUuid)
            NavEvent.emit({ organizationUuid, remark })
        },
    })

    useEffect(() => {
        runAsync({ url: 'getBeamModelList' })
    }, [runAsync])

    return (
        <div className="BeamNavTop001" style={{ top }}>
            {Data?.length > 1 && (
                <div>
                    {Data.map(({ organizationUuid, tableName, remark }) => (
                        <div
                            key={organizationUuid}
                            className={Active === organizationUuid ? 'active' : ''}
                            onClick={() => {
                                if (Active === organizationUuid) return false
                                setActive(organizationUuid)
                                NavEvent.emit({ organizationUuid, remark })
                            }}
                        >
                            {tableName}
                        </div>
                    ))}
                </div>
            )}
        </div>
    )
}

export const BeamNavTop002 = ({ top, NavEvent, uuid }) => {
    const [Active, setActive] = useState()
    const [options, setOptions] = useState()

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setOptions(res.list)
            setActive(res.list[0].organizationUuid)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getBeamModelList' })
    }, [runAsync])

    useEffect(() => {
        if (options && Active) {
            const { remark } = options.find(v => v.organizationUuid === Active)
            NavEvent.emit({ organizationUuid: Active, remark })
        }
    }, [Active, NavEvent, options])
    const onChange = e => setActive(e)

    return (
        <div className="BeamNavTop002" style={{ top }}>
            {options && (
                <Select
                    value={Active}
                    options={options}
                    onChange={onChange}
                    fieldNames={{ label: 'tableName', value: 'organizationUuid' }}
                />
            )}
        </div>
    )
}
